@import './panel-var.scss';

@mixin flex($dir: row, $align: center) {
  display: flex;
  flex-direction: $dir;
  align-items: center;
  justify-content: $align;
}

// 模块的公共基本布局方案
@mixin moduleLayout {
  .#{$prefix-s}-module-box {
    width: 100%;
    
    .#{$prefix-s}-module-title {
      padding: 0 20px;
      box-sizing: border-box;
      cursor: pointer;
      width: 100%;
      background: transparent;
      border: none;
      // border-bottom: 2px solid rgba(193, 255, 251, .2);
      &:hover .#{$prefix-s}-module-title-text, &:hover .cml-collapse-btn {
        color: #42cad7;
      }
      &:focus .#{$prefix-s}-module-title-text, &:focus .cml-collapse-btn {
        color: #42cad7;
      }
      
      .#{$prefix-s}-module-title-t {
        color: $text-color;
        // padding-top: 10px;

        font-size: $fz-sm;
        // font-weight: bold;
        height: 48px;
        @include flex(row, space-between);

        .#{$prefix-s}-module-title-text {
          @include flex(row, flex-start);
          transition: color ease .2s;
          img {
            width: 18px;
            margin-right: 8px;
          }

          .icon {
            width: 18px;
            height: 18px;
            border: 1px solid #e8e8e83d;
            box-sizing: border-box;
            border-radius: 2px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-right: 8px;
            i {
              color: $text-active-color;
              font-size: 14px;
              line-height: 1;
            }
          }
        }
      }
      &.active {
        .#{$prefix-s}-module-title-t {
          color: #42cad7;
        }
        .cml-collapse-btn {
          color: #42cad7;
        }
      }
    }

    .#{$prefix-s}-module-list {
      box-sizing: border-box;
      // border: 1px solid rgba(255, 255, 255, .1);
      // border-top: none;
      padding: 10px 0;

      color: $text-color;
      background-color: $bg-sub;

      .#{$prefix-s}-module-item {
        font-size: $fz-ssm;
        height: 36px;
        padding: 5px 5px 5px 40px;
        @include flex(row, space-between);
        transition: all ease .2s;

        &:hover,
        &.#{$prefix-s}-active {
          background-color: $bg-active;

          & .#{$prefix-s}-more {
            opacity: 1;
            visibility: visible;
          }
        }

        .#{$prefix-s}-module-item-t {
          margin-right: auto;
        }

        .#{$prefix-s}-module-item-o {
          display: flex;
        }

        .#{$prefix-s}-more {
          opacity: 0;
          visibility: hidden;
          width: 30px;
          &:focus {
            opacity: 1;
            visibility: visible;
          }
        }
      }
    }
  }
}

// 转角的样式
@mixin corner($size1:50px, $size2:10px, $color:#42cad7) {
  width: $size1;
  height: $size1;
  background: transparent;
  background-image: linear-gradient($color 1px, transparent 0),
    linear-gradient(90deg, $color 1px, transparent 0),
    linear-gradient(90deg, $color $size2, transparent 0);
  background-size: $size1, $size1, $size2 $size2;
  background-repeat: no-repeat;
}